import React from 'react';
import {Avatar, Breadcrumb, Dropdown, Space, Layout, Menu} from "antd";
import {Link, useNavigate} from "react-router-dom";
import {HomeOutlined, LoginOutlined} from "@ant-design/icons";
import {useAppDispatch} from "@/hooks";
import {postLogOutAsync, useSelectorAuth} from "@/store/slices/auth";


function IndexHeader() {
    const dispatch = useAppDispatch();
    const navigate = useNavigate();
    const {info} = useSelectorAuth();
    const menu = (
        <Menu
            items={[
                {
                    key: '1',
                    label: (
                        <Link to={"/"}>返回首页</Link>
                    ),
                    icon: <HomeOutlined />
                },
                {
                    key: '2',
                    label: (
                        <a onClick={async e=>{
                            e.preventDefault();
                            await dispatch(postLogOutAsync());
                            navigate("/login");
                        }}>退出登陆</a>
                    ),
                    icon: <LoginOutlined />
                },
            ]}
        />
    );
    return (
        <Layout.Header className="site-layout-background" style={{ padding: 0 }} >
            <Breadcrumb style={{ margin: '16px 0' }}>
                <Breadcrumb.Item>User</Breadcrumb.Item>
                <Breadcrumb.Item>Bill</Breadcrumb.Item>
            </Breadcrumb>


            <Space>
                <span>欢迎回来{info.name}！</span>
                <Dropdown overlay={menu}>
                    <a onClick={e => e.preventDefault()}>
                        <Avatar src={info.avatar} />
                    </a>
                </Dropdown>
            </Space>

        </Layout.Header>
    );
}

export default IndexHeader;